// 引入axios
import Vue from "vue"
import axios from "axios";
import { Toast } from 'vant';
Vue.use(Toast);
// 在组件中就可以引入这个文件,并使用axios.get|post()
/*
    home.vue
        import axios from "../request/request.js"
        axios.get("请求地址")
*/

// 给axios对象进行加配置
// 此处的ins 就是 axios 对象 只不过经过处理后的axios对象
const ins = axios.create({
    // 设置请求地址
    /*
        请求地址:
            https://www.abc.com/index/index     请求首页数据
                axios.get("https://www.abc.com/index/index")
            https://www.abc.com/search          请求搜索数据
                axios.get("https://www.abc.com/search")
            https://www.abc.com/cart            请求购物车数据
                axios.get("https://www.abc.com/cart")

            优化:
            baseURL:"https://www.abc.com"

            再做数据请求的时候就可以写成:
            axios.get("/index/index")    请求地址位置直接写请求路径,就默认去baseURL这个服务器下去请求数据
            axios.get("/search")
    */
    baseURL:"http://kumanxuan1.f3322.net:8001",
    // 请求超时时间 单位是毫秒   1秒 = 1000 毫秒
    timeout:5000
})


// 在组件中使用axios的时候
/*
    axios.get(/index/index)
    应该是:
    ins.get(/index/index)
*/


// 请求拦截
/*
    你要去一个借口中请求数据
    ins.get("/index/index")
    .then(res=>{
        res 就是请求成功的结果
    })

    现有有一个接口不能直接请求:
        1. 该接口需要传递参数
           例如:
            搜索  => 搜索接口的时候, 需要给该接口提供要搜索的数据(它就是参数)
        2. 该接口需要传递请求头:
           例如:
            购物车  => 调用购物车接口 => 调用购物车接口必须登录过
            购物车接口中需要传递请求头,请求头的值需要是你登录成功的token
            什么是token???
                token是你登录后的标识
                你登录成功后,返回的结果中就包含token
                你在做登录请求的时候,需要传递 用户名和密码参数
                验证用户名  密码  => 成功了  => token =>  gsdfgagsjdfgjhagsd72637846
            购物车=>发送请求=> 提供token =>调用接口
            搜索=>发送请求=> 提供token =>调用接口

        3.在该文件中设置请求拦截,在请求拦截中设置请求头
*/

// 这回请求拦截每一次请求都会被执行一次
ins.interceptors.request.use(config=>{
    /*
        在请求拦截中设置请求头:
            请求头中需要设置token
            token哪里来的??
                login.vue
                登录成功后才会得到token
                你在你的登录组件中在做数据请求的时候,提供正确的账号和密码
                验证成功之后.才能得到token
                在登录的组件中得到token之后,将token存储起来:
                    将token存储到localStorage.setItem("token","要存储的值")
            我们需要在请求拦截中获取token
                let token = localStorage.getItem('token');
                此时就可以在请求拦拦截中获取到这个token
                if(token){
                    设置请求头
                    config.headers['X-Nideshop-Token'] = token;
                }
    */

    /*
        在请求拦截中,可以设置加载图标的展示
        此时有做请求吗
        加载图标  => 转

        =>  发送请求  转
    */
    console.log("我是请求拦截,每一次请求我都会执行");
    // 设置加载轻提示
    // Toast.loading({
    //     message: '加载中...',
    //     forbidClick: true,
    // });
    return config;
})
// 响应拦截

ins.interceptors.response.use(res=>{
    // 到此处,一定是请求完成了
    // 清除加载等待的图标
    console.log("我是响应拦截,每一次响应我都会执行");
    // 手动清除轻提示
    // Toast.clear()
    return res.data;
})


// 开放出去
export default ins;



